<template>
	<view class="page business-card">
		<nav-header title="我的名片">
			<template v-slot:right>
				<!-- <svg-icon icon="share"></svg-icon> -->
			</template>
		</nav-header>
		<scroll-view scroll-y="true" class="scroll-content">
			<!-- <view class="card">
				<view :style="{backgroundColor: cardColor}" class="AllCard">
					<view class="info"
						:style="{backgroundColor: cardColor,color: cardColor === '#FFFFFF' ? '#000' : '#fff'}">
						<view class="info-left">
							<view>
								<text class="uname">{{workNumber.employeeName}}</text>
								<text class="job">{{workNumber.psotName|| '工程师'}} </text>
							</view>
							<view class="company-name">
								<text>{{workNumber.companyName}}</text>
								<text class="uname"></text>
							</view>

						</view>
						<view class="info-right" @longpress="modifyAvatar">
							<image class="img" :src="workNumber.headImage" width="100"></image>
						</view>
					</view>
					<view class="contact"
						:style="{backgroundColor: cardColor,color: cardColor === '#FFFFFF' ? '#000' : '#fff'}">
						<view class="contact-information">
							<view>{{workNumber.employeePhone || '18888888888'}}</view>
							<view>{{workNumber.employeeEmail || '12345@qq.com'}}</view>
							<view>广东省东莞市大岭山镇</view>
						</view>
						<view class="motto">
							<text>{{workNumber.motto}}</text>
							<view class="switch-themes" @click="toggleColor">
								<svg-icon icon="switch-themes" :width="130" :height="40"></svg-icon>
							</view>
						</view>
					</view>

					水印
					<view id="watermarkContainer" class="watermark-container"> 设置容器大小
						<view class="watermark" v-for="(watermark, index) in watermarks" :key="index"
							:style="{ position: 'absolute', top: watermark.top + 'px', left: watermark.left + 'px', transform: `rotate(${watermark.rotate}deg)` }">
							{{ watermark.text }}
						</view>
					</view>
				</view>


			</view> -->

			<view class="card2">
				<view class="AllCard" :style="{backgroundImage: `url(${cardBgColor})`}">
					<view class="card-content">
						<view class="content">
							<view class="card-top">
								<view class="top-left" @longpress="modifyAvatar">
									<image class="img" v-if="workNumber.headImage" :src="workNumber.headImage"
										@tap="previewImage(workNumber.headImage)" width="100"></image>
									<svg-icon v-else icon="avatar-default" :width="140"
										style="border-radius: 70rpx;"></svg-icon>
								</view>
								<view class="top-right">
									<view class="right-top">
										<text class="title text-lg-Medium">{{workNumber.employeeName}}</text>
										<text class="job text-xs-Regular">｜ {{workNumber.psotName|| 'JAVA开发工程师'}}</text>
									</view>
									<up-line></up-line>
									<view class="right-bottom">
										<view class="info">
											<svg-icon icon="phone-call-forward" :width="32"></svg-icon>
											<text
												class="text-md-Medium">{{workNumber.employeePhone || '168 2563 2253'}}</text>
										</view>
										<view class="info">
											<svg-icon icon="email (2)" :width="32"></svg-icon>
											<text
												class="text-xs-Regular">{{workNumber.employeeEmail || 'myZhang778@163.com'}}</text>
										</view>
										<view class="info">
											<svg-icon icon="location" :width="32"></svg-icon>
											<text class="text-xs-Regular">广东省东莞市大岭山镇</text>
										</view>
										<view class="info">
											<svg-icon icon="company" :width="32"></svg-icon>
											<text class="text-xs-Regular">{{workNumber.companyName}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="card-bottom">
								<text
									class="text-xs-Regular">{{workNumber.motto||"“编造谎言的人撒的每一次谎不只是自杀行为，而且还是对人类社会的健康的伤害。——爱默生”"}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="themes">
				<text class="text-sm-Medium">名片主题</text>
				<view class="selected-themes">
					<view class="selected" v-for="item in themesList" :key="item.id" @click="selectTheme(item)">
						<!-- <svg-icon :icon="item.color" :width="110"></svg-icon> -->
						<up-image :show-loading="true" :src="item.color" width="55px" height="55px"></up-image>
						<text>{{item.text}}</text>
						<svg-icon v-if="item.id === selectedThemeId" icon="check-1" :width="48"
							class="getIt"></svg-icon>
					</view>
				</view>
				<!-- <view class="button">
				<button @click="SaveSettings">保存设置</button>
			</view> -->
			</view>

			<view class="motto-input">
				<view class="title">
					<text class="input-label text-sm-Medium">编辑格言</text>
					<text class="text-sm-Regular" style="color: #A4A7AE;">{{countOtto}}/60</text>
				</view>
				<uni-easyinput type="textarea" :inputBorder="false" @input="sumOtto" v-model="workNumber.motto"
					height="40px" placeholder="请输入您的格言" maxlength="60"></uni-easyinput>
				<!-- <up-textarea type="text" v-model="workNumber.motto" autoHeight placeholder="请输入您的格言" count
				maxlength="30"></up-textarea> -->
			</view>
			<view class="motto-input">
				<view class="title">
					<text class="input-label text-sm-Medium">手机号</text>
					<text class="text-sm-Regular" style="color: #A4A7AE;">{{countPhone}}/11</text>
				</view>
				<uni-easyinput type="number" :inputBorder="false" @input="sumPhone" v-model="workNumber.employeePhone"
					height="40px" placeholder="请输入您的手机号" :clearable="false" maxlength="11"></uni-easyinput>
				<!-- <up-textarea type="text" v-model="workNumber.employeePhone" autoHeight placeholder="请输入您的手机号" count
				maxlength="12"></up-textarea> -->

			</view>
			<view class="motto-input">
				<view class="title">
					<text class="input-label text-sm-Medium">邮箱</text>
					<text class="text-sm-Regular" style="color: #A4A7AE;">{{countEmail}}/20</text>
				</view>
				<uni-easyinput type="text" :inputBorder="false" @input="sumEmail" v-model="workNumber.employeeEmail"
					height="40px" placeholder="请输入您的邮箱" :clearable="false" maxlength="20"></uni-easyinput>
				<!-- <up-textarea type="text" v-model="workNumber.employeeEmail" autoHeight placeholder="请输入您的邮箱" count
				maxlength="20"></up-textarea> -->
			</view>
		</scroll-view>

		<tabbar-button-group text="保存设置" @click="SaveSettings"></tabbar-button-group>

		<!-- <view class="share">
			<text>分享到：</text>
			<view class="selected-themes">
				<view class="selected" v-for="item in shareList" :key="item.id">
					<svg-icon :icon="item.img" :width="100"></svg-icon>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import useUserStore from '@/store/userStore'
	import UNI_APP from '@/.env.js'
	export default {
		data() {
			return {
				fontNum: 0,
				workNumber: {},
				companyId: null,
				userInfo: null,
				phone: "",
				email: "",
				countOtto: 0, //统计格言长度
				countPhone: 0,
				countEmail: 0,
				cardColor: "#2B272F",
				colors: ['#2B272F', '#FFFFFF', '#7F7F7F', '#02A7F0', '#FFDF00'], // 5种颜色
				cardBgColor: "'https://file.dgyxy.com/resource/icon/Property 1=default.png'",
				bgColors: ["'https://file.dgyxy.com/resource/icon/Property 1=default.png'",
					"'https://file.dgyxy.com/resource/icon/Property 1=white.png'",
					"'https://file.dgyxy.com/resource/icon/Property 1=gray.png'",
					"'https://file.dgyxy.com/resource/icon/Property 1=dark.png'",
					"'https://file.dgyxy.com/resource/icon/Property 1=gold.png'"
				],
				colorIndex: 0, // 当前颜色的索引
				selectedThemeId: 0, // 默认选中的主题的 id
				watermarks: [],
				themesList: [{
						id: 1,
						color: "https://file.dgyxy.com/resource/icon/view-default.png",
						text: "默认"
					},
					{
						id: 2,
						color: "https://file.dgyxy.com/resource/icon/view-white.png",
						text: "纯白"
					},
					{
						id: 3,
						color: "https://file.dgyxy.com/resource/icon/view-gray.png",
						text: "商务灰"
					},
					{
						id: 4,
						color: "https://file.dgyxy.com/resource/icon/view-dark.png",
						text: "高级黑"
					},
					{
						id: 5,
						color: "https://file.dgyxy.com/resource/icon/view-gold.png",
						text: "土豪金"
					}
				],
				shareList: [{
						id: 1,
						img: "fx4",
						text: "微信"
					},
					{
						id: 2,
						img: "fx11",
						text: "朋友圈"
					},
					{
						id: 3,
						img: "fx8",
						text: "我的好友"
					},
					{
						id: 4,
						img: "fx9",
						text: "我的商友"
					},
					{
						id: 5,
						img: "fx3",
						text: "QQ"
					},
					{
						id: 6,
						img: "fx5",
						text: "微博"
					},
					{
						id: 7,
						img: "fx10",
						text: "保存图片"
					}
				]
			}
		},
		mounted() {
			this.generateWatermarks(); // 在组件挂载后生成水印
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			// 修改头像
			modifyAvatar() {
				uni.chooseImage({
					count: 1, // 选择一张图片
					success: async (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.uploading = true;
						try {
							const uploadRes = await this.uploadImage(tempFilePaths[0]);
							uni.showToast({
								title: '更改证件照成功',
								icon: 'success'
							});

							const jsonObject = JSON.parse(uploadRes);
							this.workNumber.headImage = jsonObject.data.originUrl

						} catch (error) {
							console.error('上传失败：', error);
						} finally {
							this.uploading = false;
						}
					}
				});

			},

			async uploadImage(filePath) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: UNI_APP.BASE_URL + '/image/upload',
						header: {
							accessToken: uni.getStorageSync("loginInfo").accessToken
						},
						filePath: filePath,
						name: 'file',
						success: (uploadFileRes) => {
							resolve(uploadFileRes.data);
						},
						fail: (error) => {
							reject(error);
						},
					});
				});
			},


			// 保存设置
			SaveSettings() {
				console.log(this.userInfo)

				this.workNumber.theme = this.selectedThemeId
				this.$http({
					url: "/job/update",
					data: this.workNumber,
					method: 'PUT',
				}).then(res => {
					uni.showToast({
						title: '保存设置成功',
						icon: 'success',
						duration: 1000 // 设置显示时长为 3000 毫秒
					});


					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000); // 3000 毫秒即 3 秒后执行返回上一页操作
				});





			},
			sumOtto(e) {
				this.countOtto = e.length
			},
			sumPhone(e) {
				this.countPhone = e.length
			},
			sumEmail(e) {
				this.countEmail = e.length
			},
			toggleColor() { //切换主题
				this.colorIndex = (this.colorIndex + 1) % this.bgColors.length;
				this.cardBgColor = this.bgColors[this.colorIndex];

				switch (this.colorIndex + 1) {
					case 1:
						this.selectedThemeId = 1
						break;
					case 2:
						this.selectedThemeId = 2
						break;
					case 3:
						this.selectedThemeId = 3
						break;
					case 4:
						this.selectedThemeId = 4
						break;
					case 5:
						this.selectedThemeId = 5
						break;
					default:
						this.selectedThemeId = 1
						break
				}
			},
			selectTheme(item) { //选中效果
				this.colorIndex = item.id - 1;

				this.cardBgColor = this.bgColors[this.colorIndex];

				if (this.selectedThemeId === item.id) {
					this.selectedThemeId = null;
				} else {
					this.selectedThemeId = item.id;
				}


			},
			// 水印
			generateWatermarks() {
				const numLines = 6;
				const watermarkText = this.workNumber.companyName;
				const rotationAngle = -45; // 固定旋转角度
				const watermarks = [];
				const containerWidth = 200; // 容器宽度
				const containerHeight = 150; // 容器高度
				const spacing = 65; // 水印之间的间距
				for (let i = 0; i < numLines; i++) {
					for (let j = 0; j < numLines; j++) {
						const top = i * spacing;
						const left = j * spacing;
						watermarks.push({
							top,
							left,
							rotate: rotationAngle,
							text: watermarkText
						});
					}
				}
				this.watermarks = watermarks; // 更新data中的watermarks数组
			},

			_getData() {
				const userStore = useUserStore()
				this.userInfo = userStore.userInfo
				console.log("个人id", this.userInfo.id)
				this.$http({
					url: `/job/get/${this.companyId}/${this.userInfo.id}`,
					method: 'GET'
				}).then(res => {
					this.workNumber = res
					console.log("res", this.workNumber)
					this.selectTheme(this.themesList[res.theme - 1]);


				});
			},
		},
		onShow() {
			this._getData()
		},
		onLoad(options) {
			console.log("options", options)
			this.companyId = parseInt(options.companyId)
			// console.log("companyId",companyId)
		}
	}
</script>

<style lang="scss" scoped>
	.business-card {
		.scroll-content {
			height: calc(100vh - 280rpx);
			/* 减去固定元素的高度 */
		}

		.card {
			padding: 20rpx 30rpx;
			// width: 100%;
			// position: relative;

			.AllCard {
				padding: 30rpx;
				// width: 320px;
				// width: 100%;
				height: 180px;
				// margin-left: -30rpx;
				border-radius: 20rpx;
				position: relative;
				box-shadow: 0px 0px 5px #AAAAAA;
				z-index: 100;
			}

			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				// color: #fff;

				.info-left {

					font-size: 30rpx;

					.uname {
						font-weight: 600;
						font-size: 32rpx;
					}

					.job {
						color: #bdbdbd;
						margin-left: 20rpx;
					}

					.company-name {
						margin-top: 20rpx;
					}

				}

				.info-right {
					width: 240rpx;
					height: 100rpx;

					.img {
						width: 150rpx;
						height: 150rpx;
					}
				}
			}

			.contact {
				// color: #fff;
				margin-top: 140rpx;
				display: flex;
				justify-content: space-between;
				font-size: 25rpx;

				.motto {
					width: 250rpx;
					margin-top: -60rpx;

					.switch-themes {
						position: absolute;
						right: 0;
						bottom: -10rpx;
					}
				}
			}

			.watermark-container {
				position: absolute;
				top: 0%;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
				pointer-events: none;
				overflow: hidden;
			}

			.watermark {
				position: absolute;
				color: rgba(170, 170, 170, 0.3);
				font-size: 14px;
				white-space: nowrap;
				user-select: none;
				z-index: 0;
			}
		}

		.card2 {
			padding: 24rpx 32rpx;

			.AllCard {
				width: 100%;
				// height: 400rpx;
				background-repeat: no-repeat;
				// background-image: url('https://file.dgyxy.com/resource/icon/Property 1=default.png');
				background-size: 100% 100%;

				// background-image: v-bind('cardBgColor');
				// background-size: cover;
				// background-repeat: no-repeat;

				.card-content {
					padding: 16rpx;

					.content {
						display: flex;
						flex-direction: column;
						gap: 32rpx;
						border-radius: 16rpx;
						background-color: $brand-50;
						padding: 32rpx 16rpx;

						.card-top {
							display: flex;
							gap: 32rpx;

							.top-left {
								.img {
									width: 140rpx;
									height: 140rpx;
									border-radius: 50%;
								}
							}

							.top-right {
								display: flex;
								flex-direction: column;
								gap: 16rpx;

								.right-top {
									display: flex;
									align-items: center;
									gap: 8rpx;

									.title {
										color: $gray-900;
									}

									.job {
										color: $gray-400;
									}
								}

								.right-bottom {
									.info {
										display: flex;
										align-items: center;
										gap: 8rpx;
									}
								}
							}
						}

						.card-bottom {
							padding: 12rpx;
							border-radius: 8rpx;
							background-color: $white;
							color: $gray-400;
						}
					}
				}
			}
		}

		.motto-input {
			padding: 10rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 24rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			:deep(.uni-easyinput__content.is-textarea) {
				background-color: $gray-100 !important;
			}

			:deep(.uni-easyinput__content-textarea) {
				padding: 24rpx 32rpx;
				margin: 0 !important;
			}

			:deep(.uni-easyinput__content-input) {
				background-color: $gray-100 !important;
				padding: 24rpx 32rpx;
			}

			.count {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}

		.themes {
			padding: 10rpx 30rpx;

			.selected-themes {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.selected {
					display: flex;
					align-items: center;
					flex-direction: column;
					font-size: 26rpx;
					position: relative;
					gap: 16rpx;

					.getIt {
						position: absolute;
						top: 20%;
						left: 30%;
					}
				}
			}

			.button {
				width: 100%;

				button {
					margin-top: 30rpx;
					font-size: 28rpx;
					background-color: #007aff;
					color: #fff;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 20rpx;
				}
			}
		}

		.share {
			padding: 10rpx 30rpx;

			.selected-themes {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.selected {
					display: flex;
					align-items: center;
					width: 138rpx;
					margin-top: 10rpx;
					flex-direction: column;
					font-size: 26rpx;
				}
			}
		}
	}

	.input-label {
		width: 65px;
		/* 同样这里宽度值可按需调整 */
		display: inline-block;
		/* 让文本按照内联块元素显示，方便和后面输入框排列且能设置宽度等样式 */
	}
</style>